<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简历</title>
    <link rel="stylesheet" href="demo.css">
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
    <script src=" https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <script src="demo.js"></script>
</head>

<body>
    <div id="wrapper">
        <!-- 头部 -->
        <div id="header" class="headers">
            <img src="./img/11.png" alt="">
            <ul class="c1">
                <li><a href="#HomePage">HomePage</a>
                    <div class="homepage"></div>
                </li>
                <li><a href="#Personal">Personal</a>
                    <div class="personal"></div>
                </li>
                <li><a href="#My skill">My skill</a>
                    <div class="myskill"></div>
                </li>
                <li><a href="#My prise">My prise</a>
                    <div class="myprise"></div>
                </li>
                <li><a href="#My resume">My resume</a>
                    <div class="myresume"></div>
                </li>
                <li><a href="#My grown">My grown</a>
                    <div class="mygrown"></div>
                </li>
            </ul>
            <button class="btn-call">联系我</button>
        </div>

        <!-- 头部 -->
        <div id="head" class="header">
            <img src="./img/11.png" alt="">
            <ul class="c1">
                <li><a href="#HomePage">HomePage</a>
                    <div class="homepage"></div>
                </li>
                <li><a href="#Personal">Personal</a>
                    <div class="personal"></div>
                </li>
                <li><a href="#My skill">My skill</a>
                    <div class="myskill"></div>
                </li>
                <li><a href="#My prise">My prise</a>
                    <div class="myprise"></div>
                </li>
                <li><a href="#My resume">My resume</a>
                    <div class="myresume"></div>
                </li>
                <li><a href="#My grown">My grown</a>
                    <div class="mygrown"></div>
                </li>
            </ul>
            <button class="btn-call">联系我</button>
        </div>

        <!-- 个人 -->
        <div id="personal">
            <img src="./img/0.jpg" alt="">
            <div class="content">
                <p>I am a Front-end Developer</p>
                <h2>RuanShaoYang</h2>
                <p>Make a little progress every day, as long as it is forward, there will always be progress.</p>
                <p><span>人气榜：</span><img :src="item.src" alt="" style="width: 25px;" v-for="item in star"></p>
                <button class="btn-count" @click="addcount()">+1</button><button class="btn-count" @click="cutcount()">-1</button>
            </div>
        </div>

        <!-- 联系 -->
        <div id="contact">
            <h2>与我联系</h2>
            <div class="ways">
                <div class="message">
                    <form action="#">
                        <h4>留言</h4>
                        <input type="text" placeholder="姓名"><br>
                        <input type="email" placeholder="Email"><br>
                        <input type="number" placeholder="电话" id="phone"><br>
                        <textarea name="message" id="msg" cols="35" rows="10" placeholder="留言"></textarea>
                    </form>
                    <button type="submit" class="btn-submit" click="show()">发 送</button>

                </div>
                <div class="way">
                    <h4>联系方式</h4>
                    <p>电话:</p>
                    <p>18829013167</p>
                    <p>Email:</p>
                    <p>1062365785@qq.com</p>
                    <p>住址:</p>
                    <p>西安市未央区辛家庙</p>
                </div>
            </div>

        </div>

        <div id="able">
            <h4>What can I do ?</h4>
            <div class="items">
                <div class="item">
                    前端工程师
                </div>
                <div class="item">
                    中小学教师
                </div>
                <div class="item">
                    文员
                </div>
                
            </div>
        </div>


        <!-- 教育背景 -->
        <div id="myEducation">
            <h4>教育背景</h4>
            <table>
                <tr>
                    <th>时间</th>
                    <th>学校</th>
                    <th>专业</th>
                    <th>学历</th>
                </tr>
                <tr>
                    <td>2013-2017</td>
                    <td>西安文理学院</td>
                    <td>园艺(辅修计算机)</td>
                    <td>本科</td>
                </tr>
            </table>
        </div>

        <!-- 工作经验 -->
        <div id="work">
            <h4>工作经历</h4>
            <table>
                <tr>
                    <th>时间</th>
                    <th>公司</th>
                    <th>职位</th>
                    <th>工作内容</th>
                </tr>
                <tr v-for="user in users">
                    <td>{{user.time}}</td>
                    <td>{{user.company}}</td>
                    <td>{{user.position}}</td>
                    <td>{{user.job}}</td>
                </tr>

            </table>
            <div class="container mt-3">
                <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
                    添加工作经历
                </button>
            </div>

            <!-- 项目经验 -->
            <div class="project">
                <h4>项目经验</h4>
                <ul>
                    <li>
                        <h6>①中国农业科技推广网</h6>
                        <p>项目描述：该项目是农业科技社会化服务平台，是专门从事农业科技成果、科技产品、实用技术转化推广应用和农业科技信息服务的公益性专业平台。提供农业产前、产中、产后全产业链科技与信息综合服务。该项目当时处于后期的维护与测试阶段。</p>
                        <p>我的职责：参与网站页面的测试，查找存在的问题，并与其他成员一起攻克解决问题。</p>
                        <p>项目链接: www.agricoop.net/news</p>
                    </li>
                    <li>
                        <h6>②电商后台管理系统项目</h6>
                        <p>项目描述：客户使用的业务服务：PC 端，管理员使用的业务服务：PC 后台管理端。PC 后台管理端
                            的功能：管理用户账号（登录，退出，用户管理，权限管理），用户管理（用户管理），权限管理（角
                            色列表，权限管理），商品管理（商品分类，分类参数，商品信息，订单），数据统计，电商后台管
                            理系统采用前后端分离的开发模式，前端项目是基于 Vue 的 SPA（单页应用程序）项目，前端技术
                            栈:Vue,Vue-Router,Element-UI,Axios,Echarts</p>
                        <p>我的职责：独立完成</p>
                    </li>
                    <li>
                        <h6>③Echarts 数据可视化之疫情实时监控展示</h6>
                        <p>项目描述：使用 Ajax 完成后台数据的获取，对数据分析展示，实时数据的监控显示，并实现疫情
                            地图，确诊省份，境外输入，累计和新增趋势的展示。</p>
                        <p>我的职责：独立完成</p>
                    </li>
                    <li>
                        <h6>④黑马品优购(uni-app)</h6>
                        <p>项目描述:黑马团队制作的电商小程序，完成了购物需求，项目中包含了轮播图，楼层区图片展示，分类导航，搜索商品，购物车，一键登录等功能，通过完成项目，加深了对组件之间数据传递的理解与掌握，掌握了数据信息的长久存储和封装组件。</p>
                        <p>我的职责：独立完成</p>
                    </li>
                    <li>
                        <h6>⑤梦想鹿颜值秀，梦想鹿影视(uni-app) (已发布上线)</h6>
                        <p>项目描述：梦想鹿颜值秀基于百度AI人脸检测识别技术和动植物识别技术，通过调用接口，快速返回识别的信息属性，并展示给用户。梦想鹿影视展示了影院热映，免费在线观看，近期热门电影三大影视模块，实现了用户可以查看更多电影，查看电影详情，观看影视的预告片，添加收藏，一键登录等功能。</p>
                        <p>我的职责：独立完成</p>
                    </li>
                    <li>
                        <h6>⑥完成微信小程序项目的实战。</h6>
                        <p>网易云，梦想鹿影视，梦想鹿颜值秀，美团外卖，邵阳的简历，宠物交易平台等小程序,熟练使用微信小程序开发工具。</p>
                    </li>
                    <li>
                        <h6>⑦能够独立完成淘宝，百度，豆瓣网，学而思等静态网页的制作</h6>
                    </li>
                    <li>
                        <h6>⑧同时，也自学了百余个小 demo 制作效果，并独立动手操作能够完成。
                            跟着课程和教程学着采用 html、CSS3、JavaScript、jQuery 制作了相应的页面需求，并尝试再次
                            独立完成页面制作。</h6>
                    </li>
                </ul>
            </div>


        </div>
        <!-- 模态框 -->
        <div class="modal fade" id="myModal">
            <div class="modal-dialog">
                <div class="modal-content">
                    <!-- 模态框头部 -->
                    <div class="modal-header">
                        <h4 class="modal-title">工作经历</h4>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <!-- 模态框内容 -->
                    <div class="modal-body">
                        <table>
                            <tr>
                                <td>time:</td>
                                <td><input type="text" placeholder="时间" v-model="user.time"></td>
                            </tr>
                            <tr>
                                <td>company:</td>
                                <td><input type="text" placeholder="公司" v-model="user.company"></td>
                            </tr>
                            <tr>
                                <td>position:</td>
                                <td><input type="text" placeholder="职位" v-model="user.position"></td>
                            </tr>
                            <tr>
                                <td>job:</td>
                                <td><input type="text" placeholder="工作描述" v-model="user.job"></td>
                            </tr>
                        </table>
                    </div>
                    <!-- 模态框底部 -->
                    <div class="modal-footer">
                        <button type="button" class="btn btn-danger" data-bs-dismiss="modal">关闭</button>
                        <button type="button" class="btn btn-danger" @click="add">提交</button>
                    </div>
                </div>
            </div>
        </div>

        <div class="remark">
            <h4>自我评价</h4>
            <ul>
                <li>关注前端前沿技术，基本功扎实，熟练使用 jQuery、JavaScript、 HTML5、CSS3 等；</li>
                <li> 熟练应用常见的前端框架。</li>
                <li> 较强的学习能力和适应能力，良好的独立分析解决问题能力和逻辑分析思维；</li>
                <li>良好的团队沟通协作力和服务意识，较强的工作执行力和抗压能力，愿与公司一同
                    发展。</li>
            </ul>
        </div>


    



    </div>


</body>

<script src="./demo.js"></script>

</html>